<template>
  <div class="p-5">
    <a-tabs type="card">
      <a-tab-pane key="1" tab="基本设置" class="tb1">
        <a-form :model="queryParams" :labelCol="{span:5}" :wrapperCol="{span:18}">
      <a-row>
        <a-col :span="8">
          <a-form-item label="通道开关">
            <a-switch v-model:checked="checked" />
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item label="数据输出格式">
            <a-select
              ref="select"
              v-model:value="queryParams.area"
              style="width: 100%;"
              placeholder="请选择区域"
              allowClear
              :options="areaOptions"
            >
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item label="射频输入">
            <a-select
              ref="select"
              v-model:value="queryParams.area"
              style="width: 100%;"
              placeholder="请选择区域"
              allowClear
              :options="areaOptions"
            >
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item label="BB帧时标">
            <a-select
              ref="select"
              v-model:value="queryParams.area"
              style="width: 100%;"
              placeholder="请选择区域"
              allowClear
              :options="areaOptions"
            >
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item label="工作模式">
            <a-select
              ref="select"
              v-model:value="queryParams.area"
              style="width: 100%;"
              placeholder="请选择区域"
              allowClear
              :options="areaOptions"
            >
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item label="输出目的IP">
            <a-input v-model:value="queryParams.enterpriseName" placeholder="请输入名称"/>
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item label="ModCode">
            <a-input v-model:value="queryParams.enterpriseName" placeholder="请输入名称"/>
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item label="中心频率">
            <a-input v-model:value="queryParams.enterpriseName" placeholder="请输入名称"/>(950,000,000 - 2,150,000,000 Hz)
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item label="符号速率">
            <a-input v-model:value="queryParams.enterpriseName" placeholder="请输入名称"/>(sps)
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item label="输出目的端口号">
            <a-input v-model:value="queryParams.enterpriseName" placeholder="请输入名称"/>
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item label="输出源端口号">
            <a-input v-model:value="queryParams.enterpriseName" placeholder="请输入名称"/>
          </a-form-item>
        </a-col>

        <a-col :span="8">
          <a-form-item label="频谱反转">
            <a-select
              ref="select"
              v-model:value="queryParams.area"
              style="width: 100%;"
              placeholder="请选择区域"
              allowClear
              :options="areaOptions"
            >
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item label="滚降系数">
            <a-select
              ref="select"
              v-model:value="queryParams.area"
              style="width: 100%;"
              placeholder="请选择区域"
              allowClear
              :options="areaOptions"
            >
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :span="12" :offset="12">
          <a-form-item>
            <a-button type="primary">保存</a-button>

          </a-form-item>
        </a-col>
      </a-row>
    </a-form>
      </a-tab-pane>
    </a-tabs>

  </div>
</template>

<script lang="ts">
import {defineComponent, reactive, toRaw,ref,onMounted} from "vue";
import {Form} from "ant-design-vue";
import { getOption,setOption} from "/@/api/biz/option";
import { message } from 'ant-design-vue';
import {cloneDeep} from "lodash-es";
import { useUserStore } from "/@/store/modules/user";
const useForm = Form.useForm;

  export default defineComponent({

    setup() {
      onMounted(() => {
        getList();

      });

      const columns = [
        {
          title: '解调器',
          dataIndex: 'name',
        },
        {
          title: '通道编号',
          align: "center",
          dataIndex: 'industry',
        },
        {
          title: '中心频率',
          align: "center",
          dataIndex: 'region',
        },
        {
          title: "符号速率",
          align: "center",
          dataIndex: "phone"
        },
        {
          title: '通道锁定',
          align: "center",
          dataIndex: 'notice_time',
        },
        {
          title: '译码锁定',
          align: "center",
          dataIndex: 'notice_num',
        },
        {
          title: '解调锁定',
          align: "center",
          dataIndex: 'status',
        },
        {
          title: '信号功率',
          align: "center",
          dataIndex: 'declare_time',
        },
        {
          title: '信噪比',
          align: "center",
          dataIndex: 'files',
          slots: {customRender: "file"}
        },
        {
          title: '误码率',
          align: "center",
          slots: {customRender: "content"}
        },
        {
          title: '频率偏移',
          align: "center",
          slots: {customRender: "letterDoc"}
        },
        {
          title: '采集/结束',
          align: "center",
          dataIndex: 'is_pass'
        },
        {
        title: "审采集状态",
        align: "center",
        dataIndex: "inspector_name"
      },

        {
          title: '操作',
          align: "center",
          fixed: 'right',
          key: 'action',
          width: 220,
          slots: {customRender: 'action'},
        },
      ]
      const checked = ref<boolean>(false);
      const queryParams = reactive({
        cpn: 1,
        epc: 10,
        enterpriseName: undefined,
      industry: undefined,
      area: undefined,
      gmtReceived: undefined
      })
      const dataList = ref([])
      const loading = ref(false)

      const paginationOption = reactive({
        showSizeChanger: true,
        total: 0,
        current: 1,
        onChange: changePageInfo,
        onShowSizeChange: changePageInfo
      });

      function changePageInfo(page, pageSize) {
        queryParams.cpn = page
        queryParams.epc = pageSize
        getList()
      }


      function getList() {
        loading.value = true
        /*listLetterTask(queryParams).then(res => {
          console.log(res)
          dataList.value = res.result.data
          paginationOption.current = queryParams.cpn
          paginationOption.total = res.result.cnt
          loading.value = false
        });*/
      }

      return {
        dataList,
        columns,
        paginationOption,
        labelCol: {span: 6},
        wrapperCol: {span: 18},
        queryParams,
        checked
      }
    }

  })

</script>

<style lang="less" scoped>
.spane1{
  color: #0960bd;
  cursor: pointer;
}
.list1{
  padding: 20px 0;
}
.content1{
  padding: 15px 0;
  text-indent: 24px;
}
.hh1{
  line-height: 34px;
  text-align: center;
  font-weight: bold;
}
.dd1{
  line-height: 34px;
}
.dd2{
  line-height: 34px;
  text-indent: 24px;
}
.dd3{
  line-height: 34px;
  text-indent: 24px;
  float: right;
  margin: 20px 0;
}
.tb1{
  background: #fff;
  padding-top: 50px;
}
</style>
<style>
.ant-tabs-bar{
  margin: 0;
}
</style>